import React, { useEffect, useState } from 'react'
import { Button, Form, Input, Card, message } from 'antd';
import style from '../../hospitalSet/index.module.css'
import { addorUpdataRequest, formIdrequest, changeformRequest } from '@/api/hospital/hospitalSet';
import { addorUpdataType, } from '@/api/hospital/model/hositalSet'
import { useNavigate, useParams } from 'react-router-dom';

export default function AddorupdataSet() {
  //form 创造实列
  const [form] = Form.useForm();
  //编程式路由
  const Navigate = useNavigate()
  //useParams传参接收id
  const { id } = useParams()
  //console.log(id);

  //useEffect 通过Id查询数据并渲染到页面
  useEffect(() => {
    //因为组件复用的关系在新增医院的时候不需要刚进入就发送请求,
    //需要先判断当前是否有Id
    if (id) {
      const getHosDetail = async () => {
        const result = await formIdrequest(id)
        //console.log(result,'result!!!!!!!!!');
        // 将获取到的数据设置到表单中
        form.setFieldsValue(result);
      }
      getHosDetail()
    }
  }, [])


  //添加更改表单数据请求函数
  const addorUpdataData = async (data: addorUpdataType) => {
    //console.log(data,'data');
    /*
    这里判断id是因为要和添加做区分，
    当用户进入到更新页面中，会自动发送请求拿到id
    证明有Id所以也证明用户访问的是更新页面
    */
    if (id) {
      //修改
      await changeformRequest({
        ...data,
        id
      })
      message.info('修改医院成功')
    } else {
      //添加
      await addorUpdataRequest(data)
      message.info('添加医院成功')
    }
    //添加更新请求成功后返回至上一级
    Navigate(-1)
  }
  //返回上一级函数
  const jumpback = () => {
    Navigate(-1)
  }

  return (
    <Card>
      <Form
        form={form}
        name="basic"
        labelCol={{ span: 3 }}
        wrapperCol={{ span: 18 }}
        onFinish={addorUpdataData}
        autoComplete='off'

      >
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{ required: true, message: '请输入医院名称' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="医院编号"
          name="hoscode"
          rules={[{ required: true, message: '请输入医院编号' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="api基础路径"
          name="apiUrl"
          rules={[{ required: true, message: '请输入api基础路径' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人姓名"
          name="contactsName"
          rules={[{ required: true, message: '请输入联系人姓名' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[{ required: true, message: '请输入联系人手机' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          wrapperCol={{ offset: 3 }}
        >
          <Button type="primary" htmlType="submit" className={style.mr}>
            提交
          </Button>
          <Button type="default" htmlType="button" onClick={jumpback}>
            返回
          </Button>
        </Form.Item>
      </Form>
    </Card>
  )
}
